<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <h1><i class="el-icon-phone-outline"></i> 咨询管理</h1>
        <el-form :inline="true" :model="filterData" class="filter-form">
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="filterData.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filterData.status" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="待处理" value="pending"></el-option>
              <el-option label="已处理" value="resolved"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterConsultations">筛选</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="filteredConsultations" style="width: 100%">
          <el-table-column prop="date" label="日期" width="150" />
          <el-table-column prop="name" label="咨询人" width="150" />
          <el-table-column prop="topic" label="咨询主题" />
          <el-table-column prop="status" label="状态" width="120" />
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" type="success" @click="resolveConsultation(scope.$index)">标记为已处理</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 新模块：咨询统计 -->
        <div class="card consultation-stats">
          <h2><i class="el-icon-pie-chart"></i> 咨询统计</h2>
          <p>待处理咨询: {{ pendingCount }}</p>
          <p>已处理咨询: {{ resolvedCount }}</p>
        </div>

        <!-- 新模块：常见问题 -->
        <div class="card faq">
          <h2><i class="el-icon-question"></i> 常见问题</h2>
          <ul>
            <li v-for="(question, index) in faqs" :key="index">
              <i class="el-icon-info"></i> {{ question }}
            </li>
          </ul>
        </div>

        <!-- 新模块：用户反馈 -->
        <div class="card feedback">
          <h2><i class="el-icon-message"></i> 用户反馈</h2>
          <el-input type="textarea" v-model="userFeedback" placeholder="请留下您的反馈" />
          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';

export default {
  name: 'ConsultationManagement',
  components: {
    AsideLayout
  },
  data() {
    return {
      filterData: {
        dateRange: [],
        status: ''
      },
      consultations: [
        { date: '2023-10-01', name: '张三', topic: '入住咨询', status: '待处理' },
        { date: '2023-10-02', name: '李四', topic: '费用咨询', status: '已处理' },
        // 更多咨询记录可以在这里添加
      ],
      filteredConsultations: [],
      faqs: [
        '如何查看咨询记录？',
        '咨询记录可以导出吗？',
        '如何筛选特定日期的咨询记录？'
      ],
      userFeedback: ''
    };
  },
  computed: {
    pendingCount() {
      return this.consultations.filter(consultation => consultation.status === '待处理').length;
    },
    resolvedCount() {
      return this.consultations.filter(consultation => consultation.status === '已处理').length;
    }
  },
  mounted() {
    this.filteredConsultations = this.consultations;
  },
  methods: {
    filterConsultations() {
      this.filteredConsultations = this.consultations.filter(consultation => {
        const [start, end] = this.filterData.dateRange;
        const consultationDate = new Date(consultation.date);
        const isWithinDateRange = (!start || consultationDate >= new Date(start)) && (!end || consultationDate <= new Date(end));
        const isStatusMatch = !this.filterData.status || consultation.status === this.filterData.status;
        return isWithinDateRange && isStatusMatch;
      });
    },
    resolveConsultation(index) {
      this.filteredConsultations[index].status = '已处理';
      this.$message.success('咨询已标记为已处理');
    },
    submitFeedback() {
      if (this.userFeedback) {
        this.$message.success('感谢您的反馈！');
        this.userFeedback = '';
      } else {
        this.$message.error('请填写反馈内容');
      }
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.filter-form {
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.filter-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

h1 i, h2 i {
  margin-right: 10px;
  color: #409EFF;
}

.el-button {
  transition: background-color 0.3s, transform 0.3s;
}

.el-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

.el-input, .el-select, .el-date-picker {
  transition: border-color 0.3s;
}

.el-input:focus, .el-select:focus, .el-date-picker:focus {
  border-color: #409EFF;
}

.el-table {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.el-table th, .el-table td {
  transition: background-color 0.3s;
}

.el-table th:hover, .el-table td:hover {
  background-color: #f2f6fc;
}
</style> 